/**
 * @author 14544
 * @date 2020/3/25 10:27
 */

//  XMLHttpRequest 是 JavaScript 中发送 HTTP 请求的浏览器内置对象。
// 虽然它的名字里面有“XML”，但它可以操作任何数据，而不仅仅是 XML 格式。我们还可以用它来上传/下载文件，跟踪进度等等。

// 在现代 web 开发中，出于以下三种原因，我们可能会用 XMLHttpRequest：
//  1. 历史原因：我们需要使用 XMLHttpRequest 支持现有脚本。
//  2. 我们需要兼容老旧的浏览器，并且不想用 polyfills（例如为了让脚本更小）。
//  3. 我们需要一些 fetch 目前无法做到的事情，比如跟踪上传进度。

let TEST_URL = '/gov/gov.do?methodname=queryDocStatuses&serviceid=gov_status';

// 创建xhr的一般格式
let createXhr = () => {
        if (window.XMLHttpRequest) {
            return new window.XMLHttpRequest()
        }
        return new ActiveXObject('Microsoft.XMLHTTP') // 兼容IE6, IE5
    }

// 最简单的http请求，只需要四步
{
    // 1. 创建对象
    let xhr = new window.XMLHttpRequest();

    // 2. 调用 xhr.open 函数的时候并不会建立连接。它的作用仅仅是作为当前请求的配置，而网络活动要到 send 调用后才开启。
    xhr.open('GET', TEST_URL, true); // 异步请求

    // 3. 这个方法建立连接，并发送请求到服务器。可选参数 body 包含了请求主体。 get 请求不需要传入请求体：body
    xhr.send(null);

    // 4. 监听响应事件。
    // 这三个事件是最常用的：
    // load — 当请求结果已经返回，包括像 404 这样的 HTTP 错误。
    // error — 当无法完成请求时，比如网络中断或者无效的 URL。 发生连接错误，例如，域名错误。不会响应诸如 404 这类的 HTTP 错误。
    // progress — 下载期间定时触发，报告已经下载了多少。

    xhr.onload = function () {
        console.log('loaded')
        console.log(`status:${xhr.status}`)
        console.log(`response:`)
        console.log(window.JSON.parse(xhr.response || xhr.responseText))
    }
}